   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WebSocket Example</title>
     <style>
       body {
         font-family: Arial, sans-serif;
         margin: 20px;
       }
       #messages {
         border: 1px solid #ccc;
         padding: 10px;
         height: 200px;
         overflow-y: scroll;
         margin-bottom: 10px;
       }
       #messageInput {
         width: 70%;
         padding: 5px;
       }
       #sendButton {
         padding: 5px 10px;
       }
     </style>
   </head>
   <body>
     <h1>WebSocket Example</h1>
     <div id="messages"></div>
     <input type="text" id="messageInput" placeholder="Type a message..." />
     <button id="sendButton">Send</button>

     <script>
       const ws = new WebSocket('ws://localhost:8080/websocket?token=123');

       ws.onopen = function() {
         console.log('Connected to WebSocket server');
         const messages = document.getElementById('messages');
         const message = document.createElement('div');
         message.textContent = 'Connected to WebSocket server';
         messages.appendChild(message);
       };

       ws.onmessage = function(event) {
         const messages = document.getElementById('messages');
         const message = document.createElement('div');
         message.textContent = `Received: ${event.data}`;
         messages.appendChild(message);
         messages.scrollTop = messages.scrollHeight;
       };

       ws.onclose = function() {
         console.log('Disconnected from WebSocket server');
         const messages = document.getElementById('messages');
         const message = document.createElement('div');
         message.textContent = 'Disconnected from WebSocket server';
         messages.appendChild(message);
       };

       ws.onerror = function(error) {
         console.error('WebSocket error:', error);
         const messages = document.getElementById('messages');
         const message = document.createElement('div');
         message.textContent = `WebSocket error: ${error.message}`;
         messages.appendChild(message);
       };

       document.getElementById('sendButton').addEventListener('click', function() {
         const input = document.getElementById('messageInput');
         const message = input.value;
         if (message) {
           ws.send(message);
           const messages = document.getElementById('messages');
           const messageDiv = document.createElement('div');
           messageDiv.textContent = `Sent: ${message}`;
           messages.appendChild(messageDiv);
           messages.scrollTop = messages.scrollHeight;
           input.value = '';
         }
       });
     </script>
   </body>
   </html>
   